<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>细胞盒子</title>
    <script type="application/javascript" src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/element_index.css">
    <script type="application/javascript" src="lib/element_index.js"></script>
    <script type="application/javascript" src="lib/axios.js"></script>
    <script type="application/javascript" src="lib/qs.js"></script>

</head>
<body>

<div id="app">
    <el-button type="primary" v-for='btn in boxs' @click="openBox(btn)">{{btn.name}}</el-button>
    <!--    <el-button type="primary" v-for='btn in btns' @click="open(btn)">{{btn.name}}</el-button>-->
    <el-button type="primary" @click="addMsgVisible = true;isAdd = true"
               class="el-icon-circle-plus-outline"></el-button>

    <!--    <el-dialog-->
    <!--            :title="boxTitle"-->
    <!--            :visible.sync="dialogVisible"-->
    <!--            width="30%">-->
    <!--        <div v-for="boxv in box.box">-->
    <!--            <el-button type="primary" v-for='bh in boxv' @click="openMsg(bh)">{{bh}}</el-button>-->
    <!--        </div>-->
    <!--        <span slot="footer" class="dialog-footer">-->
    <!--            <el-button @click="dialogVisible = false">取 消</el-button>-->
    <!--        </span>-->
    <!--    </el-dialog>-->


    <el-dialog
            id="boxDialog"
            :title="isAdd ? '添加' : box.name"
            :visible.sync="addMsgVisible"
            @close="boxClose"
            width="80%">

        <el-form :model="box">
            <el-row v-if="isAdd">
                <el-col :offset="3" :span="6">
                    <el-form-item label="">
                        <el-input v-model="box.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row v-for="bv in box.box" :gutter="20">
                <el-col :offset="3">
                    <el-col :span="2" v-for='bh in bv'>
                        <el-form-item label="">
                            <el-input v-if="isAdd" v-model="bh.name"></el-input>
                            <el-button v-else @click="openMsg(bh)">{{bh.name}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addMsgVisible = false">取 消</el-button>
            <el-button v-if="isAdd" @click="addMsg">确 定</el-button>
        </span>
    </el-dialog>


    <el-dialog
            id="bmsg"
            :title="msgTitle"
            :visible.sync="msgVisible"
            @close="bmsgClose"
            width="30%">
        <div>
            <span class="el-icon-edit-outline" style="float:right" @click="isEditMsg = !isEditMsg"></span><br>
            <el-input
                    v-if="isEditMsg"
                    type="textarea"
                    :rows="5"
                    placeholder="请输入信息"
                    v-model="bMsg.msg"
            >
            </el-input>
            <span v-if="!isEditMsg">

                {{bMsg.msg}}
            </span>

        </div>
        <span slot="footer" class="dialog-footer">
            <el-button v-if="isEditMsg" @click="submitMsg">提 交</el-button>
            <el-button @click="msgVisible = false">取 消</el-button>
        </span>
    </el-dialog>

</div>

</body>
</html>


<script>
    new Vue({
        el: '#app',
        data: {
            boxs: [],
            boxIndex: 0,
            msg: '信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息信息',
            dialogVisible: false,
            msgVisible: false,
            addMsgVisible: false,
            boxTitle: 'boxTitle',
            msgTitle: 'msgTitle',
            box: {
                box: [
                    [{name: "233"}], [{name: ""}],
                    [{name: ""}], [{name: ""}]
                ],
                name: ""
            },
            isAdd: false,
            isEditMsg: false,
            bMsg: {
                msg: "",
                eluid: ""
            }
        },
        beforeCreate: function () {

        },
        mounted: function () {
            this.initBox()
            this.boxList()
        },
        methods: {
            open(btn) {
                // this.boxIndex = i
                this.boxTitle = btn.name
                this.box = btn
                this.dialogVisible = true
            },
            openMsg(bh) {
                this.msgTitle = bh.name
                this.msgVisible = true
                this.isEditMsg = false
                this.bMsg.eluid = bh.uid
                var _this = this
                this.getMsg()
                // axios.get("msg", {params: this.bMsg})
                //     .then(function (value) {
                //         _this.bMsg = value.data.length > 0 ? value.data[0] : _this.bMsg
                //     })
                //     .catch(function (reason) {
                //         console.log(reason)
                //     })
            },
            getMsg(){
                var _this = this
                axios.get("msg", {params: this.bMsg})
                    .then(function (value) {
                        _this.bMsg = value.data.length > 0 ? value.data[0] : _this.bMsg
                    })
                    .catch(function (reason) {
                        console.log(reason)
                    })
            },
            submitMsg() {
                var _this = this
                axios.post("msg", this.bMsg)
                    .then(function (value) {
                        if (value.data === 1) {
                            alert("提交成功")
                            _this.isEditMsg = false
                            _this.getMsg()
                            // _this.addMsgVisible = false
                            // _this.boxList()
                        } else {
                            alert("提交失败")
                        }
                    })
                    .catch(function (reason) {
                        console.log(reason)
                    })
            },
            addMsg() {
                var _this = this
                axios.post("box", this.box)
                    .then(function (value) {
                        if (value.data === 1) {
                            alert("添加成功")
                            _this.addMsgVisible = false
                            _this.boxList()
                        } else {
                            alert("添加失败")
                        }
                    })
                    .catch(function (reason) {
                        console.log(reason)
                    })
            },
            boxClose() {
                this.initBox()
            },
            initBox() {
                var box = []
                for (var i = 0; i < 9; i++) {
                    box[i] = []
                    for (var j = 0; j < 9; j++) {
                        box[i][j] = {name: ""}
                    }
                }
                this.box.box = box
                this.box.name = ''
            },
            boxList() {
                var _this = this
                axios.get("box")
                    .then(function (value) {
                        for (i in value.data) {
                            value.data[i].box = JSON.parse(value.data[i].boxElementStr)
                        }
                        _this.boxs = value.data
                    })
                    .catch(function (reason) {
                        console.log(reason)
                    })
            },
            openBox(b) {
                this.addMsgVisible = true
                this.isAdd = false
                this.box = JSON.parse(JSON.stringify(b))

            },
            bmsgClose() {
                this.bMsg = {
                    msg: "",
                    eluid: ""
                }
            }

        }
    })
</script>